<script setup lang="ts">
import { getArticlesAPI } from "@/api/article";
import type { ArticleItem } from "@/types";
import { ref, watch } from "vue";
import dayjs from "dayjs";

const props = defineProps<{
  activeId: number;
}>();

const list = ref<ArticleItem[]>([]); // 文章列表数据
const getArictles = async () => {
  const result = await getArticlesAPI({
    channel_id: props.activeId,
    timestamp: Date.now().toString(),
  });
  list.value = result.results;
};
watch(
  () => props.activeId,
  (newId) => {
    // 获取最新的数据
    getArictles();
  },
  {
    immediate: true,
  }
);
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in list" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
      <template v-if="item.cover.type === 3">
        <img v-for="img in item.cover.images" class="img" :src="img" alt="" />
      </template>
      <template v-else-if="item.cover.type === 1">
        <img class="img" :src="item.cover.images?.[0]" alt="" />
      </template>
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ dayjs(item.pubdate).fromNow() }}</span>
      </div>
    </div>
  </div>
</template>
